
<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" ref="formInline" label-width="90px" slot="form" >          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="标题">
                           <el-input v-model="formInline.title" placeholder="请输入标题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="formInline.status" placeholder="请选择" style="width:100%">
                              <el-option v-for="item in formInline.statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发布客户端">
                            <el-select v-model="formInline.client" placeholder="请选择" style="width:100%">
                              <el-option v-for="item in formInline.clientList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="8">
                        <el-form-item label="置顶">
                            <el-select v-model="formInline.starte" placeholder="请选择" style="width:100%">
                              <el-option v-for="item in formInline.starteList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                  <el-col :span="8">
                        <el-form-item label="发布日期" >
                            <el-row>
                              <el-col :span="11">
                                <startDate v-model="formInline.startUploadTime" :clearable="true" :picker-options="formInline.pickerOptions1" :end-date-options.sync="formInline.pickerOptions2" :state="false"></startDate>
                              </el-col>
                              <el-col :span="2" align="center">
                                至
                              </el-col>
                              <el-col :span="11">
                                <endDate v-model="formInline.endUploadTime" :clearable="true" :picker-options="formInline.pickerOptions2" :start-date-options.sync="formInline.pickerOptions1" :state="false"></endDate>
                              </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </div>

            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="addNewsE">添加</el-button>
                </div>
            </div>
            <el-table :data="dataList" border style="width: 100%" v-loading="loading" @sort-change="tableFilter">
                    <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
                    <el-table-column align="center" label="创建时间" prop="createTime" sortable="custom"></el-table-column>
                    <el-table-column align="center" label="标题" prop="title">
                      <template scope="scope">
                        <div class="icon"><i v-if="scope.row.stick==1"></i><p :class="{text:scope.row.stick==1}">{{scope.row.title}}</p></div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态" prop="status">
                        <template scope="scope">
                            {{scope.row.status == 0 ? '未发布' :'已发布'}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="客户端" prop="client">
                        <template scope="scope">
                            {{scope.row.client == 0 ? '家庭端' : scope.row.client == 1 ? '教学端' : scope.row.client == 2 ? '家庭端和教学端' :"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="发布时间" prop="uploadTime">
                        <template scope="scope">
                            {{scope.row.uploadTime || '--'}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="阅读数" prop="readNum" sortable="custom"></el-table-column>
                    <el-table-column align="center" label="点赞数" prop="clickNum" sortable="custom"></el-table-column>
                    <el-table-column align="center" label="创建人" prop="creator"></el-table-column>
                    <el-table-column label="操作" width="240" >
                        <template scope="scope">
                            <span v-if="scope.row.status == 0">
                                <el-button class="btn btn-outline" type="text" @click="btnPush(scope.row)">发布</el-button>
                                <el-button class="btn btn-outline" type="text" @click="edi(scope.row)">编辑</el-button>
                                <el-button class="btn btn-outline" type="text" @click="del(scope.row)">删除</el-button>
                            </span>
                            <span v-else>
                                <el-button class="btn btn-outline" v-if="scope.row.stick==0" type="text" @click="btnHot(scope.row,1)">置顶</el-button>
                                <el-button class="btn btn-outline" v-if="scope.row.stick==1" type="text" @click="btnCall(scope.row,0)">取消置顶</el-button>
                                <el-button class="btn btn-outline" type="text" @click="del(scope.row)">删除</el-button>
                            </span>
                        </template>
                    </el-table-column>                 
                </el-table>
                <div class="pagination-container" style="text-align:right">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listQuery.total"
                        :current-page.sync="listQuery.page"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
        </TableLayout>

        <!-- 删除文章 -->
        <delNews v-if="delNews.dialogVisible" :delNews="delNews" @setSon="setSon"></delNews>

        <!-- 发布文章 -->
        <pushNews v-if="pushNews.dialogVisible" :pushNews="pushNews" @setSon="setSon"></pushNews>

        <!-- 置顶文章 -->
        <hotNews v-if="hotNews.dialogVisible" :hotNews="hotNews" @setSon="setSon"></hotNews>

        <!-- 取消置顶文章 -->
        <ediHotNews v-if="ediHotNews.dialogVisible" :ediHotNews="ediHotNews" @setSon="setSon"></ediHotNews>
    </div>
</template>

<script>
import Levelbar from '../../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import { pageHeadLine } from 'api/newTope';
import delNews from './comps/delNews';
import pushNews from './comps/pushNews';
import hotNews from './comps/hotNews';
import ediHotNews from './comps/ediHotNews';
import moment from 'moment';
export default {
    name: 'newsTope',
    components: {
        Levelbar,
        TableLayout,
        startDate,
        endDate,
        delNews,
        pushNews,
        hotNews,
        ediHotNews
    },
    data() {
        return {
          formInline: {
            title: '',
            status: '',
            statusList: [
              {
                  label: '请选择',
                  value: ''
              },
              {
                  label: '未发布',
                  value: '0'
              },
              {
                  label: '已发布',
                  value: '1'
              }
          ],
            client: '',
            clientList: [
              {
                  label: '请选择',
                  value: ''
              },
              {
                  label: '家庭端',
                  value: '0'
              },
              {
                  label: '教学端',
                  value: '1'
              },
              {
                  label: '家庭和教学端',
                  value: '2'
              }
          ],
            starte: '',
            starteList: [
              {
                  label: '请选择',
                  value: ''
              },
              {
                  label: '已置顶',
                  value: '1'
              },
              {
                  label: '未置顶',
                  value: '0'
              }
          ],
            endUploadTime: '',
            startUploadTime: '',
            pickerOptions1: {},
            pickerOptions2: {},
            orderByCreateTime: '',
            orderByReadNum: '',
            orderByClickNum: ''
        },
          dataList: [],
          loading: false,
          listQuery: {
        // 分页
            page: 1,
            total: 0
        },
          delNews: {
            dialogVisible: false
        },
          pushNews: {
            dialogVisible: false
        },
          hotNews: {
            dialogVisible: false
        },
          ediHotNews: {
            dialogVisible: false
        }
      };
    },
    computed: {
        ...mapState({
          config: state => state.config.table,
          cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
      }),
    // 获取用户id
        ...mapGetters(['uid'])
    },
    watch: {
    // 局部刷新列表
        cacheUpdated(val) {
          val && this.searchFetchData();
      }
    },
    created() {
        this.searchFetchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
    // 分页
        handleSizeChange(val) {
          this.listQuery.page = 1;
          this.loading = true;
          this.ChangePageSize(val);
          this.searchFetchData();
      },
        handleCurrentChange(val) {
          this.loading = true;
          this.listQuery.page = val;
          this.searchFetchData();
      },
        searchFetchData() {
      // console.log(this.formInline.startUploadTime.toLocaleString('zh', { hour12: true }))
          this.loading = true;
          let startDate =
        this.formInline.startUploadTime == ''
          ? ''
          : moment(this.formInline.startUploadTime).format('YYYY-MM-DD'); // 开始时间格式处理
          let endDate =
        this.formInline.endUploadTime == ''
          ? ''
          : moment(this.formInline.endUploadTime).format('YYYY-MM-DD'); // 结束时间格式处理
          pageHeadLine(
        this.listQuery.page,
        this.config.pageSize,
        this.formInline.title,
        this.formInline.status,
        this.formInline.client,
        startDate,
        endDate,
        this.formInline.orderByCreateTime,
        this.formInline.orderByReadNum,
        this.formInline.orderByClickNum,
        this.formInline.starte
      )
        .then(data => {
            this.loading = false;
            this.dataList = data.data.content.list;
            this.listQuery.total = data.data.content.pagination.total;
        })
        .catch(error => {
            this.loading = false;
        });
      },
        onSubmit() {
          this.searchFetchData();
      },
        tableFilter(val) {
          switch (val.prop) {
            case 'createTime':
                this.initFilter(val, 'createTime');
                break;
            case 'readNum':
                this.initFilter(val, 'readNum');
                break;
            case 'clickNum':
                this.initFilter(val, 'clickNum');
                break;
            default:
                this.initFilter(val);
        }
      },
        initFilter(e, v) {
          this.formInline.orderByCreateTime = '';
          this.formInline.orderByReadNum = '';
          this.formInline.orderByClickNum = '';
          if (v == 'createTime') {
            this.orderFilterTime(e.order);
        } else if (v == 'readNum') {
          this.orderFilterNum(e.order);
      } else if (v == 'clickNum') {
          this.orderFilterClick(e.order);
      }
          this.searchFetchData();
      },
        orderFilterTime(e) {
          if (e == 'ascending') {
            this.formInline.orderByCreateTime = 1;
        } else if (e == 'descending') {
          this.formInline.orderByCreateTime = 0;
      }
      },
        orderFilterNum(e) {
          if (e == 'ascending') {
            this.formInline.orderByReadNum = 1;
        } else if (e == 'descending') {
          this.formInline.orderByReadNum = 0;
      }
      },
        orderFilterClick(e) {
          if (e == 'ascending') {
            this.formInline.orderByClickNum = 1;
        } else if (e == 'descending') {
          this.formInline.orderByClickNum = 0;
      }
      },
        addNewsE() {
          this.$router.push({ path: '/newsTope/addNewsTope' });
      },
        edi(e) {
          this.$router.push({ path: `/newsTope/ediNewsTope/${e.pId}` });
      },
        del(e) {
          this.delNews.dialogVisible = true;
          this.delNews.pId = e.pId;
      },
        setSon(e) {
          if (e) {
            this.searchFetchData();
        }
      },
        btnPush(e) {
          this.pushNews.dialogVisible = true;
          this.pushNews.pId = e.pId;
      },
        btnHot(e, val) {
          this.hotNews.dialogVisible = true;
          this.hotNews.pId = e.pId;
          this.hotNews.val = val;
      },
        btnCall(e, val) {
          this.ediHotNews.dialogVisible = true;
          this.ediHotNews.pId = e.pId;
          this.ediHotNews.val = val;
      }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
}
.btn {
  // padding-left: 5px;
  color: #37a1fb;
  cursor: pointer;
}
.icon {
  position: relative;
  i {
    position: absolute;
    display: inline-block;
    background: url(../../../images/newsTope/hot.png);
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0
  }
  .text{
    margin-left: 35px;
  }
}
</style>
